<template>
    <div class="lzx_container">
        <div id="view"></div>
        <div class="side">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item :title="'新增构件（' + fomatResult.additions.length + '）'" name="1">
                    <div
                        class="item"
                        v-for="newItem in fomatResult.additions"
                        :data-oid="newItem.id"
                        @click="zoomToActiveRectById('add', newItem.id)"
                        :key="newItem.index"
                    >
                        {{ newItem.layer }}
                    </div>
                </el-collapse-item>
                <el-collapse-item :title="'删除构件（' + fomatResult.deletions.length + '）'" name="2">
                    <div
                        class="item"
                        v-for="deleteItem in fomatResult.deletions"
                        :data-oid="deleteItem.id"
                        @click="zoomToActiveRectById('delete', deleteItem.id)"
                        :key="deleteItem.index"
                    >
                        {{ deleteItem.layer }}
                    </div>
                </el-collapse-item>
                <el-collapse-item :title="'修改构件（' + fomatResult.modifications.length + '）'" name="3">
                    <div
                        class="item"
                        v-for="changeItem in fomatResult.modifications"
                        :data-oid="changeItem.id"
                        @click="zoomToActiveRectById('change', changeItem.id)"
                        :key="changeItem.index"
                    >
                        {{ changeItem.currentLayer }}
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            infomationList: null,
            fomatResult: { additions: [], deletions: [], modifications: [] },
            activeNames: ['1'],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    mounted() {
        var previousId = this.$route.query.previousId,
            nowId = this.$route.query.nowId;
        console.log(previousId, nowId);
        let temp = {
            ver: '3.0',
            additions: [
                { layer: '暖通-空调-热水供水管', id: '22926' },
                { layer: '暖通-空调-热水回水管', id: '22927' },
                { layer: '暖通-空调-热水供水管', id: '22928' },
                { layer: '暖通-空调-热水回水管', id: '22929' },
                { layer: '暖-设备-VAV', id: '22930' },
                { layer: 'TITLE_BLOCK_A1$0$TITLE', id: '22932' }
            ],
            deletions: [
                { layer: '暖通-空调-热水回水管', id: '8375' },
                { layer: '暖通-空调-热水供水管', id: '8376' },
                { layer: '暖通-空调-热水供水管', id: '8377' },
                { layer: '暖通-空调-热水回水管', id: '8378' },
                { layer: '暖通-空调-热水供水管', id: '8424' },
                { layer: '暖通-空调-热水回水管', id: '8426' },
                { layer: '暖通-空调-冷凝水管', id: '8564' },
                { layer: '暖通-空调-冷凝水管', id: '8567' },
                { layer: '暖-设备-VAV', id: '8637' },
                { layer: '暖-设备-VAV', id: '8638' },
                { layer: '暖-设备-VAV', id: '8653' }
            ],
            modifications: [
                { previousLayer: '暖通-空调-热水供水管', currentLayer: '暖通-空调-热水供水管', id: '8387' },
                { previousLayer: '暖通-空调-热水回水管', currentLayer: '暖通-空调-热水回水管', id: '8388' },
                { previousLayer: '暖-设备-VAV', currentLayer: '暖-设备-VAV', id: '8680' },
                { previousLayer: '暖-设备-VAV', currentLayer: '暖-设备-VAV', id: '8694' }
            ]
        };
        this.fomatResult = temp;
        console.log(this.fomatResult);
        console.log(this.fomatResult.additions);
        const compareToken = 'cc9a7bc98b7b47ba83e93c3956d967b2', // compareToken: 前两张图纸对比结果
            prevToken = '2bbc8e139d924257b2001ee02999cd9d', // prevToken: 修改前图纸
            latestToken = '3272780e3e724abf8f7da5ab9e1965bd';
        var BimfaceLoaderConfig = new BimfaceSDKLoaderConfig();
        BimfaceLoaderConfig.viewToken = compareToken;
        BimfaceSDKLoader.load(BimfaceLoaderConfig, onSDKLoadSucceeded);

        let me = this;
        function onSDKLoadSucceeded(viewMetaData) {
            // 加载叠图
            const viewDom = document.getElementById('view'),
                WebAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingSetConfig();
            WebAppConfig.Toolbars = ['MainToolbar'];
            WebAppConfig.domElement = viewDom;

            const WebApplicationDrawingSet = new Glodon.Bimface.Application.WebApplicationDrawingSet(WebAppConfig);
            window.drawingSet = WebApplicationDrawingSet.getViewer();

            const drawingTokens = [
                { id: 1, viewToken: latestToken },
                { id: 2, viewToken: prevToken }
            ];
            WebApplicationDrawingSet.addDrawings(drawingTokens, function() {
                if (drawingSet.sets[0].viewerDrawing.version == '2') {
                    drawingSet.sets[0].viewerDrawing.setDisplayMode(3);
                    drawingSet.sets[1].viewerDrawing.setDisplayMode(3);
                } else {
                    WebApplicationDrawingSet.getViewer().setDisplayMode(0);
                }
                // sideNavInit(drawingSet, compareToken);
            });
        }
        me.handleInit();
    },
    methods: {
        zoomToActiveRectById(type, id) {
            const active = drawingSet.sets[0].viewerDrawing; // 修改后图纸
            const inActive = drawingSet.sets[1].viewerDrawing; // 修改前图纸
            const ratio = 0.2;
            // 选中效果切换
            if (type && type !== 'delete') {
                active.zoomToObject(id, ratio);
                var box = active.getObjectBoundingBox(id);
                inActive.getViewer().zoomToWorldBox(box[0], box[1], ratio);
            } else {
                inActive.zoomToObject(id, ratio);
                var box = inActive.getObjectBoundingBox(id);
                active.getViewer().zoomToWorldBox(box[0], box[1], ratio);
                // 针对旧版图纸数据强制更新
                if (active.version === '1') {
                    active.update(true);
                    inActive.update(true);
                }
            }
        },
        handleChange(val) {
            console.log(val);
        },
        handleInit() {
            let token = sessionStorage.getItem('token');
            this.$axios({
                method: 'get',
                url: 'http://localhost:8080/user/getContextId?AccessToken=' + token
            })
                .then(res => {
                    console.log(res);
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.lzx_container {
    display: flex;
}
.lzx_container #view {
    width: 84%;
    height: 83vh;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
}
.side {
    width: 16%;
    height: 83vh;
    background-color: #fff;
    padding: 0 10px;
    overflow-y: scroll;
}
.side::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 10px;
    height: 10px;
}
/* 滚动条中的小方块处理 */
.side::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
}
/* 滚动条滚动的轨道 */
.side::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
}
.side .item {
    height: 36px;
    line-height: 36px;
    padding-left: 8px;
}
.side .item:hover {
    background-color: #11dab7;
    color: white;
    cursor: pointer;
}
</style>

<style>
.content {
    overflow: auto;
}
</style>
